<template>
	<view class="container f-center"> 
		<view class="wraper "> 
			<view class="info-top zcRelative">
				<view class="iconfont icon-close" @tap="do_clockIn(0)"></view>
			<!-- <view class="f-center date-top" v-if="isClockIn"> 2019-10-30</view> -->
			</view>
			<view class="info-bottom">
				<view class="bottom-head flex zcJustifyC_center">{{clockText}} </view>
		    <view class="f-center date" v-if='!isClockIn'> </view>
				<view class='info-wrap flex' v-if='isClockIn'>
					<view class="zcFlex1 f-upDonwn"><view>今日接待数</view><view style="min-height: 34upx;">{{saleData.ReceptNumber}}</view></view>
					<view class="zcFlex1 f-upDonwn"><view>下单数</view><view style="min-height: 34upx;">{{saleData.OpBillNumber}}</view></view>
					<view class="zcFlex1 f-upDonwn"><view>待回访</view><view style="min-height: 34upx;">{{saleData.WaitTraceNumber}}</view></view>
				</view>
				<view class="f-side btn-wrap">
					<button type="primary" @tap="do_clockIn(0)">否</button>
					<button type="primary" @tap="do_clockIn(1)">是</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let _this;
	export default{
		data(){
			return{
				isClockIn:true,
				clockText:'上班打卡',
				LineOnDate:''
			}
		},
		props:{
			workStatus:String,
			saleData:Object
		},
		created(){
			let _this = this;
			this.isClockIn = (this.workStatus == "上班")?false:true;
			this.clockText = this.isClockIn?"下班打卡":"上班打卡";
		},
		onLoad(){
			
		},
		methods:{
			do_clockIn(item){
				this.$emit('do_clockIn',item)
			},
			  formatDate(date, fmt) {
			  var currentDate = new Date(date);
			  var o = {
			    "M+": currentDate.getMonth() + 1, //月份
			    "d+": currentDate.getDate(), //日
			    "h+": currentDate.getHours(), //小时
			    "m+": currentDate.getMinutes(), //分
			    "s+": currentDate.getSeconds(), //秒
			    "q+": Math.floor((currentDate.getMonth() + 3) / 3), //季度
			    "S": currentDate.getMilliseconds() //毫秒
			  };
			  if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (currentDate.getFullYear() + "").substr(4 - RegExp.$1.length));
			  for (var k in o)
			    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
			  return fmt;
			}
		}
	}
</script>

<style>
	.container{
		position: absolute;
		top:0;
		bottom: 0;
		background-color: rgba(0,0,0,.4);
		z-index: 999;
	}
	.wraper{
		height: 65vh;
		width: 80vw;
		background-color: #fff;
		border-radius: 20upx;
		bo-box-shadow:1upx 1upx 5upx 5upx #ccc ;
		background: url("../../static/home/tanchuang.png") center center no-repeat;
		background-size: 105% 100%;
	}
	.info-top{
		height: 52%;
	}
	.info-bottom{
		height: 48%;
		/* border: 1upx solid red; */
	}
	.date{
		height: 40upx;
		line-height: 40upx;
		color: #A6A6A6;
		margin-bottom: 80upx;
	}
	.bottom-head{
		height: 100upx;
		line-height: 110upx ;
		font-size: 38upx;
		font-weight: 600;
	}
.btn-wrap button{
	width: 240upx;
	height: 80upx;
	line-height: 80upx;
	border-radius: 50upx;
	background-color: transparent !important;
	background-image: linear-gradient(to right, #29ABF9, #3B74F5);
}
.btn-wrap button:first-child{
		margin-right: 40upx;
		background-image:none;
		border: 1upx solid #3B74F5;
		color: #3B74F5;
}
.date-top{
	height: 120upx;
	line-height: 120upx;
	color: #fff;
}
.info-wrap>view>view{
	color: #A6A6A6;
}
.info-wrap>view>view:nth-of-type(2){
	color: #74BDFD;
	line-height: 35upx;
	
}
.info-wrap{
	margin-bottom: 35upx;
}
.icon-close{
	position: absolute;
	right: 0;
	top:-80upx;
	color: #fff;
	font-size: 44upx;
}
</style>
